<!-- 设备状态看板 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="topTitle">
          <ul>
            <li class="green">
              <span>
                运行:
                <b>{{obj.running}}</b>
              </span>
            </li>
            <li class="yellow">
              <span>
                待机:
                <b>{{obj.waiting}}</b>
              </span>
            </li>
            <li class="red">
              <span>
                报警:
                <b>{{obj.warning}}</b>
              </span>
            </li>
          </ul>
        </div>
        <ul class="ulBox">
          <li v-for="(item,index) in obj.details" :key="index">
            <div class="liBox">
              <div class="liTitle">
                <span>{{item.equipName}}</span>
                <b>
                  设备状态：
                  <em :class="item.statusStr == '运行' ? 'green' : item.statusStr == '待机' ? 'yellow':'red'">{{item.statusStr}}</em>
                </b>
              </div>
              <div class="liContent">
                <div class="imgLeft">
                  <el-image :src="item.url">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" style="color:#fff;"></i>
                    </div>
                  </el-image>
                </div>
                <div class="rightContent">
                  <ol>
                    <li>运行时间:{{item.runningTime}}h</li>
                    <li>电流:{{item.current}}A</li>
                    <li>电压:{{item.voltage}}V</li>
                    <li>稼动率:{{item.cropRate}}</li>
                  </ol>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
export default {
  name: 'EqStatusKanBan',
  components: {
    allTitle
  },
  data() {
    return {
      titleName: '设备状态看板',
      obj: {}
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      // if (this.$refs['rightEchartsLine'].myChart)
      //   this.$refs['rightEchartsLine'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.getEqStatus()
      }, 1000)
    },
    async getEqStatus() {
      const res = await this.$axios.get('/board/equip/status/board')
      if (res.data.code === 200) {
        this.obj = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.red {
  color: red;
}
.yellow {
  color: yellow;
}
.green {
  color: #1ac81e;
}
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1200px;
  min-height: 675px;
  .containerBox {
    position: relative;
    height: 100%;
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      overflow: hidden;
      /* 头部三个状态样式 */
      .topTitle {
        height: 30px;
        line-height: 30px;
        ul {
          height: 100%;
          li {
            float: left;
            font-size: 14px;
            padding: 0 10px;
            height: 100%;
            // width: 33.3333%;
            b {
              padding-left: 5px;
            }
          }
          li::before {
            content: '\25C8';
            // background-color: black;
            border-radius: 50%;
            display: inline-block;
            height: 28px;
            width: 16px;
            font-size: 18px;
            margin-right: 3px;
          }
        }
      }
      ul {
        li {
          list-style: none;
        }
      }
      /* 中间几个盒子样子 */
      .ulBox {
        height: calc(100% - 30px);
        li {
          width: 33.3333%;
          padding: 10px 15px;
          height: 33.3333%;
          float: left;
          .liBox {
            height: 100%;
            padding: 10px 23px 10px 15px;
            background: url(../../../assets/images/kuank.png) no-repeat center;
            background-size: 100% 100%;
            // border: 1px solid #2860c9;
            // border-radius: 5px;
            // box-shadow: inset 0 0 10px rgba(171, 219, 255, 0.35);
            .liTitle {
              height: 30px;
              line-height: 30px;
              border-bottom: 1px solid #2860c9;
              color: #b0cbfd;
              font-size: 14px;
              position: relative;
              padding: 0 10px;
              b {
                font-weight: normal;
                position: absolute;
                right: 15px;
                em {
                  font-style: normal;
                  // color: green;
                  font-size: 16px;
                }
              }
            }
            .liContent {
              height: calc(100% - 30px);
              padding: 10px 0 8px 0;
              .imgLeft {
                float: left;
                width: 50%;
                height: 100%;
                padding-left: 5px;
                .el-image {
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
                }
              }
              .rightContent {
                float: left;
                width: 50%;
                height: 100%;
                ol {
                  padding-left: 10px;
                  height: 100%;
                  li {
                    list-style: none;
                    color: #b0cbfd;
                    width: 100%;
                    padding: 8px 0;
                    height: 25%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang='scss'>
.imgLeft {
  .image-slot {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 20px;
    }
  }
  .el-image__error {
    background: none !important;
  }
}
</style>
